<template>
    <el-form ref="userFormRef" :model="user" label-width="8%" style="margin:auto;" :rules="userRules">
        <el-form-item label="账号" prop="loginAct">
            <el-input type="text" v-model="user.loginAct" />
        </el-form-item>
        <el-form-item label="密码" prop="loginPwd2" v-if="user.id > 0"><!--修改-->
            <el-input type="password" v-model="user.loginPwd2" />
        </el-form-item>
        <el-form-item label="密码" prop="loginPwd" v-else><!--如果是添加-->
            <el-input type="password" v-model="user.loginPwd" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
            <el-input type="text" v-model="user.name" />
        </el-form-item>
        <el-form-item label="手机" prop="phone">
            <el-input type="text" v-model="user.phone" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input type="text" v-model="user.email" />
        </el-form-item>
        <el-form-item label="账号是否未过期" prop="accountNoExpired">
            <el-select v-model="user.accountNoExpired" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="密码是否未过期" prop="credentialsNoExpired">
            <el-select v-model="user.credentialsNoExpired" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="账号是否未锁定" prop="accountNoLocked">
            <el-select v-model="user.accountNoLocked" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="账号是否已启用" prop="accountEnabled">
            <el-select v-model="user.accountEnabled" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="userSubmit(userFormRef)">提交
            </el-button>
            <el-button type="primary" plain @click="goBack">返回</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { doPost, doGet, doPut } from "../http/httpRequest.js"
import { showMessage } from '../util/message';
import { useRoute, useRouter } from 'vue-router';
let user = ref({})
let router = useRouter()
let userFormRef = ref(null)
let userRules = ref({
    //对name字段定义验证规则，验证规则不止一个，所以是一个数组
    loginAct: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 30, message: '账号必须是3-30个字符', trigger: 'blur' },
    ],
    loginPwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '密码必须是6-16个字符', trigger: 'blur' },
    ],
    loginPwd2: [
        { min: 6, max: 16, message: '密码必须是6-16个字符', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, message: '姓名至少是两个字符', trigger: 'blur' },
        {
            pattern: /^[\u4e00-\u9fa5]+$/, message: '姓名必须是中文汉字', trigger:
                'blur'
        }
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { min: 11, max: 11, message: '手机号码必须是11位', trigger: 'blur' },
        {
            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '手机号码格式有误',
            trigger: 'blur'
        }
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '邮箱格式有误', trigger: 'blur' }
    ],
    accountNoExpired: [
        { required: true, message: '请选择', trigger: 'change' }
    ],
    credentialsNoExpired: [
        { required: true, message: '请选择', trigger: 'change' }
    ],
    accountNoLocked: [
        { required: true, message: '请选择', trigger: 'change' }
    ],
    accountEnabled: [
        { required: true, message: '请选择', trigger: ['blur', 'change'] }
    ]
})

const goBack = () => {
    router.back()
}
//增加为常数，使其修改时会方便点
let options = [
    { label: '是', value: 1 },
    { label: '否', value: 0 }
]

onMounted(() => {
    let id = useRoute().params.userId;
    if (id) {
        loadUser(id);
    }
})

const loadUser = (id) => {
    doGet('api/user/' + id, {}).then(resp => {
        if (resp) {
            if (resp.data.code == 200) {
                user.value = resp.data.info
            } else {
                showMessage('加载数据失败', error)
            }
        }
    })
}


const userSubmit = (formEl) => {
    // console.log(formEl)
    if (!formEl) { //如果formEl不存在，也就是你没有给login()函数传userFormRef参数，那么就return，不做验证了
        return
    }
    formEl.validate((valid) => {
        if (valid) { //valid是true表示验证通过，否则没通过
            //提交请求
            let formData = new FormData();
            for (let prop in user.value) { //RefImpl
                // console.log(prop, user.value[prop])
                formData.append(prop, user.value[prop]);
            }
            console.log(user.value.id)
            if (user.value.id > 0) { //编辑
                doPut('/api/user', formData).then(resp => {
                    console.log(formData)
                    if (resp) {
                        if (resp.data.code === 200) {
                            showMessage('提交成功', 'success');
                            //跳转路由，跳到用户列表页
                            router.push('/dashboard/user')
                        } else {
                            showMessage('提交失败，原因：' + resp.data.msg, 'error');
                        }
                    }
                })
            } else {
                doPost('/api/user', formData).then(resp => {
                    if (resp) {
                        if (resp.data.code === 200) {
                            showMessage('提交成功', 'success');
                            router.push('/dashboard/user')
                        } else {
                            showMessage('提交失败', 'error');
                        }
                    }
                })
            }

        }
    })
}

</script>